<template>
  <div class="main">
    <div class="nav">
      <img :src="back" alt="" @click="handleBack"/>
      <div class="title">亲友管理</div>
    </div>
    <div class="body">
<!--      <div v-if="detectorManagementList.length==0" style="font-size: 15px;text-align: center">暂无数据...</div>-->
      <van-cell title="自己" :value="userInfo.name" ></van-cell>
      <!--      <div  >-->
      <!-- <van-loading v-if="detectorManagementList.length == 0" style="text-align:center" /> -->
      <van-cell v-for="(item,index) in detectorManagementList" :key="index" :title="item.friendLabel"
                :value="item.friendName" is-link @click.stop="edit(item)"/>
      <van-cell/>
      <!--      </div>-->
    </div>
    <div class="footer">
      <div class="size" @click="addDetector">
        <van-icon name="plus"/>
        <span>新增亲友</span></div>
    </div>
  </div>
</template>

<script>
import {getFamilyFriendList, queryTesterList} from "@/api/my";
import {mapState} from "vuex";

export default {
  name: "index",
  data() {
    return {
      back: require("@/assets/my/back.png"),
      setImg: require("@/assets/my/set-icon.png"),
      detectorManagementList: []
    }
  },
  computed: {
    ...mapState(['userInfo']),
  },
  mounted() {
    this.queryFamilyFriendList()
  },
  methods: {
    queryFamilyFriendList() {
      getFamilyFriendList().then(res => {
        this.detectorManagementList = res.data.records
        // let onself = {
        //   friendLabelTitle: '自己',
        //   friendName: this.userInfo.name
        // }
        // this.detectorManagementList.unshift(onself)
        console.log('detectorManagementList', this.detectorManagementList)
      })
    },
    handleBack() {
      // this.$router.go(-1);
      this.$router.push({path: '/my'})
      let message = {
        action: 'showBottom',
        param: {}
      }
      getInfoFromVue.postMessage(JSON.stringify(message))
    },
    addDetector() {
      this.$router.push(
          {
            path: '/addFamilyFriend',
            query: {
              name: '新增',
            }
          }
      )
    },
    edit(item) {
      console.log('edit', item)
      this.$router.push(
          {
            path: '/addFamilyFriend',
            query: {
              name: '编辑',
              obj: item
            }
          }
      )
    }
  }
}
</script>

<style scoped lang="less">
.main {
  height: 100vh;
  padding: 0px 15px;
  display: flex;
  flex-direction: column;

  .nav {
    height: 44px;
    display: flex;
    justify-content: center;
    align-items: center;
    .title{
      font-size: 20px;
      font-weight: 500;
    }

    > img {
      width: 10px;
      height: 16px;
      position: absolute;
      left: 15px;
    }
  }

  .body {
    padding-top: 30px;
    /deep/.van-cell__title, .van-cell__value {
        font-size: 17px;
     }

    .border {
      border-bottom: 1px solid rgba(229, 229, 229, 1);
    }
  }

  .footer {
    display: flex;
    justify-content: center;
    margin-top: auto;
    align-items: center;
    margin-bottom: 15px;

    .size {
      width: 165px;
      height: 38px;
      //opacity: 1;
      border-radius: 19px;
      background: rgba(242, 150, 0, 1);
      font-size: 23px;
      font-weight: 500;
      //line-height: 38px;
      color: rgba(255, 255, 255, 1);
      display: flex;
      justify-content: center;
      align-items: center;
      padding: 3px;
      //text-align: center;
      //vertical-align: top;
    }
  }
}
</style>
